<!-- <template>
    <div>共 141 首歌曲，占用 1.34 GB 空间</div>
    <div>播放按钮</div> <div>目录管理</div>
    <div>Tabs 页签</div>
    <div> Tag 类型的分类， 可以多选 </div>
    <div>列表内容， 
        <span>
            idx, 歌曲名字， 歌手， 专辑， 时长， 大小， 类型（flac, 320K）, 有歌词? 有Cover? 是否收藏? 添加到播放列表
        </span>
    </div>

    =====================
<div>
    [文件夹]  [歌手]  [专辑]  [类型]  [有歌词]  [有封面]  [是否收藏]  
</div>
过滤后，选择是否添加到收藏 、播放列表
</template> -->

<script setup>
import { ref } from "vue";
import { Settings, Refresh, AddCircle } from "@vicons/ionicons5";
import UIFileList from "@/components/UIFileList.vue";
import { usePlayerStateStore } from "@/stores/playerState";
import { useNotifyStateStore } from "@/stores/notifyState";
import { open } from "@tauri-apps/plugin-dialog";

const notification = useNotification();
var playerStore = usePlayerStateStore();
const notifyStore = useNotifyStateStore();

onMounted(() => {
  if (playerStore.localDirs.length == 0) {
    playerStore.localDirs = [
      "/home/andy/Music",
      "C:\\Tools\\MusicDB\\周深现场合集，听觉臻美盛宴",
      "E:\\迅雷下载\\【无损+歌词】人声精选歌曲（100首）",
    ];
  }
  build_options();
});

// 扫描设置的本地文件夹，然后添加到播放列表
async function scan_playlist() {
  // playerStore.curPlayList = [];
  await playerStore.scanLocalDir();

  // rebuild
  build_options();

  notification.success({
    content: "库目录扫描完成",
    meta:
      "一共扫描到 " +
      playerStore.localMusics.length +
      " 首歌曲，占用 " +
      getTotalSize() +
      " M 空间",
    duration: 6000,
    keepAliveOnHover: true,
  });
}

const dir_select_show = ref(false);

function getTotalSize() {
  var val = playerStore.localMusicDiskSize;
  return (val / 1024 / 1024).toFixed(2);
}

const songList = computed(() => {
  var list = playerStore.localMusics.filter((item) => {
    if (option1_folder_value.value && option1_folder_value.value.length > 0) {
      if (!option1_folder_value.value.includes(item.dir)) {
        return false;
      }
    }
    if (option2_artist_value.value && option2_artist_value.value.length > 0) {
      if (!option2_artist_value.value.includes(item.artist)) {
        return false;
      }
    }
    if (option2_album_value.value && option2_album_value.value.length > 0) {
      if (!option2_album_value.value.includes(item.album)) {
        return false;
      }
    }
    if (option3_type_value.value) {
      if (item.bitrate < option3_type_value.value) {
        return false;
      }
    }
    return true;
  });

  return list;
});

var option1_folder = ref([]);
var option1_folder_value = ref(null);

var option2_artist = ref([]);
var option2_artist_value = ref(null);
var option2_album = ref([]);
var option2_album_value = ref(null);

var option3_type = ref([]);
var option3_type_value = ref(null);

function build_options() {
  option1_folder.value = Array.from(
    new Set(playerStore.localMusics.map((item) => item.dir))
  ).map((item) => {
    return { label: item, value: item };
  });
  option2_artist.value = Array.from(
    new Set(playerStore.localMusics.map((item) => item.artist))
  ).map((item) => {
    return { label: item, value: item };
  });
  option2_album.value = Array.from(
    new Set(playerStore.localMusics.map((item) => item.album))
  ).map((item) => {
    return { label: item, value: item };
  });
  option3_type.value = Array.from(
    new Set(playerStore.localMusics.map((item) => item.bitrate))
  ).map((item) => {
    return { label: item + "K", value: item };
  });
}

function filter_reset() {
  option1_folder_value.value = null;
  option2_artist_value.value = null;
  option2_album_value.value = null;
  option3_type_value.value = null;
}
function filter_add() {
  songList.value.forEach(item => {
    playerStore.add_to_playlist(
      item,
      false,
      null,
      null
    );
  });
}
async function add_folder() {
  const file = await open({
    multiple: false,
    directory: true,
  });
  if (file) {
    playerStore.localDirs.push(file);
  }
}
</script>

<template>
  <n-flex vertical class=" overflow-hidden h-full">
    <n-h1 prefix="bar">
      本地源库
      <n-button strong round type="primary" @click="dir_select_show = true">
        <template #icon>
          <n-icon size="18">
            <Settings />
          </n-icon>
        </template>
        管理文件夹
      </n-button>
    </n-h1>
    <div>
      共 {{ playerStore.localMusics.length }} 首歌曲，占用
      {{ getTotalSize() }} MB空间
    </div>
    <n-flex align="center" justify="space-evenly" :wrap="false" class="pl-2 pr-4">
      <n-select size="small" :fallback-option="false" placeholder="音源文件夹，默认全选" v-model:value="option1_folder_value"
        multiple :options="option1_folder" max-tag-count="responsive" />
      <n-select size="small" :fallback-option="false" placeholder="歌手，默认全选" v-model:value="option2_artist_value"
        multiple :options="option2_artist" max-tag-count="responsive" />
      <n-select size="small" :fallback-option="false" placeholder="专辑，默认全选" v-model:value="option2_album_value" multiple
        :options="option2_album" max-tag-count="responsive" />
      <n-select size="small" :fallback-option="false" placeholder="最低音质，默认全部" v-model:value="option3_type_value"
        :options="option3_type" max-tag-count="responsive" />
      <n-button size="small" circle type="primary" title="重置条件" @click="filter_reset">
        <n-icon>
          <Refresh />
        </n-icon>
      </n-button>
      <n-button size="small" round type="info" title="添加到播放列表" @click="filter_add">
        <template #icon><n-icon>
            <AddCircle />
          </n-icon></template>
        添加
      </n-button>
    </n-flex>
    <div class="flex-grow flex flex-col overflow-hidden">
      <UIFileList :songList="songList" />
    </div>
  </n-flex>
  <n-modal v-model:show="dir_select_show" :mask-closable="false" preset="card" title="库目录" size="huge" :closable="true"
    @onClose="dir_select_show.value = false" class="w-1/2">
    <div>
      <div v-for="(item, index) in playerStore.localDirs" :key="index"
        class="m-1 p-1 bg-blue-500 bg-opacity-30 rounded flex flex-row">
        <div>{{ item }}</div>
        <div class="flex-grow"></div>
        <n-button type="primary" size="small" @click="playerStore.localDirs.splice(index, 1)" text>
          删除
        </n-button>
      </div>
    </div>
    <template #footer>
      <n-space>
        <n-button type="primary" size="small" @click="scan_playlist">
          扫描库目录 (比较耗时，耐心等待)
        </n-button>
        <n-button type="info" size="small" @click="add_folder">
          添加库文件夹
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>
